<template>
  <div class="layout-container">
    <!-- 全局骨架屏 -->
    <global-skeleton :loading="$store.state.app.loading" />
    
    <!-- 侧边菜单栏 -->
    <div class="sidebar-container" :class="{ 'is-collapsed': isCollapse }">
      <div class="logo-container">
        <transition name="fade">
          <span v-if="!isCollapse" key="expanded" class="logo-title">后台管理系统</span>
          <span v-else key="collapsed" class="logo-title-collapse">管理</span>
        </transition>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        :collapse="isCollapse"
        :collapse-transition="true"
        router
        unique-opened>
        <!-- 首页菜单 -->
        <el-menu-item v-if="dashboardRoute" :index="'/dashboard'">
          <i :class="dashboardRoute.meta && dashboardRoute.meta.icon ? dashboardRoute.meta.icon : 'el-icon-s-home'"></i>
          <span>{{ dashboardRoute.meta && dashboardRoute.meta.title ? dashboardRoute.meta.title : '控制台' }}</span>
        </el-menu-item>
        
        <!-- 系统管理菜单 -->
        <el-submenu v-if="systemRoute" :index="systemRoute.path">
          <template #title>
            <i :class="systemRoute.meta && systemRoute.meta.icon ? systemRoute.meta.icon : 'el-icon-s-tools'"></i>
            <span>{{ systemRoute.meta && systemRoute.meta.title ? systemRoute.meta.title : '系统管理' }}</span>
          </template>
          <el-menu-item 
            v-for="(subItem, subIndex) in systemRoute.children || []" 
            :key="subIndex"
            :index="'/system/' + subItem.path">
            <i :class="subItem.meta && subItem.meta.icon ? subItem.meta.icon : 'el-icon-menu'"></i>
            <span>{{ subItem.meta && subItem.meta.title ? subItem.meta.title : subItem.name }}</span>
          </el-menu-item>
        </el-submenu>
        
        <!-- 组件演示菜单 -->
        <el-menu-item v-if="demoRoute" :index="demoRoute.path">
          <i :class="demoRoute.meta && demoRoute.meta.icon ? demoRoute.meta.icon : 'el-icon-s-tools'"></i>
          <span>{{ demoRoute.meta && demoRoute.meta.title ? demoRoute.meta.title : '组件演示' }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="main-container" :class="{ 'is-collapsed': isCollapse }">
      <!-- 头部导航栏 -->
      <div class="header">
        <div class="header-left">
          <i 
            :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" 
            class="toggle-button" 
            @click="toggleSidebar"
          ></i>
          <el-tag size="medium" effect="plain" class="page-title">
            {{currentPageTitle}}
          </el-tag>
        </div>
        <div class="right-menu">
          <!-- 添加全局搜索组件 -->
          <header-search class="right-menu-item" />
          <!-- 添加主题切换组件 -->
          <theme-switch class="right-menu-item" />
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="avatar-wrapper">
              <span>管理员</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="settings">系统设置</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 标签导航，现在位于header和内容之间 -->
      <div class="tabs-nav-container">
        <tabs-nav />
      </div>
      
      <!-- 页面主体内容 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
import TabsNav from '../components/TabsNav/index.vue'
import HeaderSearch from '../components/HeaderSearch/index.vue'
import GlobalSkeleton from '@/components/GlobalSkeleton.vue'
import ThemeSwitch from '@/components/ThemeSwitch/index.vue'

export default {
  name: 'Layout',
  components: {
    TabsNav,
    HeaderSearch,
    GlobalSkeleton,
    ThemeSwitch
  },
  data() {
    return {
      currentPageTitle: '',
      isCollapse: false
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    },
    // 获取首页路由
    dashboardRoute() {
      const routes = this.$store.getters.routes || []
      const mainRoute = routes.find(route => route.path === '/')
      return mainRoute
    },
    // 获取系统管理路由
    systemRoute() {
      const routes = this.$store.getters.routes || []
      return routes.find(route => route.path === '/system')
    },
    // 获取组件演示路由
    demoRoute() {
      const routes = this.$store.getters.routes || []
      return routes.find(route => route.path === '/demo')
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.currentPageTitle = route.meta.title || ''
      },
      immediate: true
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapse = !this.isCollapse
    },
    handleCommand(command) {
      if (command === 'logout') {
        // 直接清除token并跳转到登录页，无需调用API
        removeToken()
        this.$router.push('/login')
        this.$messageBox.success('退出登录成功')
      } else if (command === 'profile') {
        // 个人信息
        this.$router.push('/profile')
      } else if (command === 'settings') {
        // 系统设置
        this.$router.push('/settings')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  
  .sidebar-container {
    width: 220px;
    transition: all 0.3s ease;
    background-color: #304156;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    z-index: 10;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    
    &.is-collapsed {
      width: 64px;
    }
    
    .logo-container {
      height: 60px;
      line-height: 60px;
      text-align: center;
      background-color: #2b2f3a;
      overflow: hidden;
      
      .logo-title {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
      }
      
      .logo-title-collapse {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
      }
    }
    
    .sidebar-menu {
      border-right: none;
      height: calc(100vh - 60px);
      
      &:not(.el-menu--collapse) {
        width: 220px;
      }
    }
  }
  
  .main-container {
    min-height: 100vh;
    margin-left: 220px;
    transition: all 0.3s ease;
    
    &.is-collapsed {
      margin-left: 64px;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
      width: 100%;
      box-sizing: border-box;
      
      .header-left {
        display: flex;
        align-items: center;
        
        .toggle-button {
          font-size: 20px;
          margin-right: 15px;
          cursor: pointer;
          
          &:hover {
            color: #409EFF;
          }
        }
        
        .page-title {
          font-size: 14px;
        }
      }
      
      .right-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 80px;
        padding-right: 0;
        
        .right-menu-item {
          display: inline-block;
          padding: 0 10px;
          height: 100%;
          line-height: 60px;
          cursor: pointer;
          
          &:hover {
            color: #409EFF;
          }
        }
        
        .avatar-wrapper {
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 0 8px;
          height: 100%;
          
          span {
            margin-right: 5px;
            font-size: 14px;
          }
          
          &:hover {
            color: #409EFF;
          }
        }
      }
    }

    /* 标签导航容器样式 */
    .tabs-nav-container {
      padding: 5px 0;
      background-color: #fff;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12);
      z-index: 9;
      position: relative;
    }
    
    .main-content {
      background-color: #f0f2f5;
      min-height: calc(100vh - 110px);
      height: calc(100vh - 110px);
      padding: 20px;
      overflow: auto;
    }
  }
}

/* 添加响应式样式 */
@media screen and (max-width: 1200px) {
  .main-container .header {
    .right-menu .avatar-wrapper span {
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

/* 添加淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 覆盖Element UI菜单的默认过渡行为 - 使用::v-deep处理全局样式 */
::v-deep .el-menu {
  &--collapse {
    width: 64px !important;
    transition: width 0.3s ease !important;
    
    > .el-menu-item [class^=el-icon-],
    > .el-submenu > .el-submenu__title [class^=el-icon-] {
      margin: 0;
      vertical-align: middle;
      width: 24px;
      text-align: center;
    }
    
    > .el-menu-item span,
    > .el-submenu > .el-submenu__title span {
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;
      opacity: 0;
      transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }
    
    .el-submenu__icon-arrow {
      opacity: 0;
    }
  }
  
  &:not(.el-menu--collapse) {
    > .el-menu-item span,
    > .el-submenu > .el-submenu__title span {
      opacity: 1;
      visibility: visible;
      display: inline-block;
      transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
    }
  }
}

::v-deep .el-menu-item, ::v-deep .el-submenu__title {
  transition: border-color 0.3s, background 0.3s, padding 0.3s, width 0.3s;
}

::v-deep .el-submenu__icon-arrow {
  transition: transform 0.3s, opacity 0.3s !important;
}
</style> 